﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../Lib/Css/site.css" rel="stylesheet" />
    <script src="../Lib/Js/jquery.min.js"></script>
    <script src="../Lib/Js/JSXTransformer.js"></script>
    <script src="../Lib/Js/react.js"></script>
</head>
<body>
    <p>React.findDOMNode()---->获取真实的DOM元素</p>
    <p>组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。</p>
    <div id="d1"></div>
</body>
</html>
<script type="text/jsx">
    var MyComponent = React.createClass({
        handleClick:function(){
            var txt = React.findDOMNode(this.refs.myTextInput);
            txt.focus();
            txt.value= "abc";
        },
        render:function(){
            return (
                <div>
                    <input type="text" ref="myTextInput" /><br/>
                    <input type="button" value = "Focus the textbox" onClick = {this.handleClick} />
                </div>
            );
        }
    });

    React.render(
        <MyComponent />,
        $("#d1").get(0)
    )
</script>